import * as React from "react";
import Box from "@mui/material/Box";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import { Button, Chip, Paper } from "@mui/material";
import BoxSort from "./Box/BoxSort";
import { TabsContext } from "@mui/base";
import { TabPanel } from "@mui/lab";
import Bubble from "./Bubble/Bubble";
import Merge from "./Merge/Merge";
import Heap from "./Heap/Heap";
import { useState } from "react";
import { useSnackbar } from "notistack/dist";
import ControlPointIcon from "@mui/icons-material/ControlPoint";
import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
import MsgShower from "./Shower/MsgShower";
export default function Index() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  const [speed, setSpeed] = useState(1);

  const [msg, setMsg] = useState({});

  const { enqueueSnackbar } = useSnackbar();
  const speedUp = () => {
    if (speed < 0.5) {
      enqueueSnackbar("已经是最快速度辣", { variant: "warning" });
      return;
    }
    setSpeed(speed - 0.1);
  };
  const speedDown = () => {
    if (speed >= 1.5) {
      enqueueSnackbar("已经是最慢速度辣", { variant: "warning" });
      return;
    }
    setSpeed(speed + 0.1);
  };
  return (
    <Box sx={{ display: "flex", flexDirection: "row" }}>
      <Box sx={{ width: "100%", bgcolor: "background.paper" }}>
        <Paper>
          <Tabs variant="fullWidth" value={value} onChange={handleChange}>
            <Tab label="冒泡排序" />
            <Tab label="归并排序" />
            <Tab label="箱子排序" />
            <Tab label="堆排序" />
          </Tabs>
        </Paper>

        <Box sx={{ display: "flex", flexDirection: "row" }}>
          <Box sx={{ width: "28%" }}>
            <MsgShower msg={msg} value={value} />
            <Box
              sx={{
                display: "flex",
                flexDirection: "row",
                justifyContent: "center",
              }}
            >
              <RemoveCircleOutlineIcon onClick={speedDown} />

              <Box sx={{ width: "10px" }}></Box>
              <Chip label={Math.round((2 - speed) * 10) / 10 + "✖"}> </Chip>
              <Box sx={{ width: "10px" }}></Box>
              <ControlPointIcon onClick={speedUp} />
            </Box>
          </Box>
          <Box sx={{ width: "2%" }}></Box>
          <Box sx={{ width: "70%", margin: "20px", marginRight: "20px" }}>
            {value === 0 && <Bubble msg={msg} setMsg={setMsg} speed={speed} />}
            {value === 1 && <Merge msg={msg} setMsg={setMsg} speed={speed} />}
            {value === 2 && <BoxSort msg={msg} setMsg={setMsg} speed={speed} />}
            {value === 3 && <Heap msg={msg} setMsg={setMsg} speed={speed} />}
          </Box>
        </Box>
        <Box
          sx={{
            width: "100%",
            marginTop: "10px",
            display: "flex",
            flexDirection: "row",
            justifyContent: "center",
          }}
        ></Box>
      </Box>
    </Box>
  );
}
